<%--
  Created by IntelliJ IDEA.
  User: xin
  Date: 2021/12/17
  Time: 0:14
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品管理</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<style>
    /**{margin: 0;padding: 0;}*/
    /*body{min-width:1000px}*/
    /*.box{background-color:white;height: 560px}*/
    /*.box .main{height:100%;width: 80%; float: left;}*/
    /*.box .main h1{font-size: 100px; text-align: center;padding-top: 196px ;margin: 0}*/
    /*.main table{width: 100%;text-align: center;}*/
    /*.main table thead{width:100%;display: block;}*/
    /*.main table tbody{width:100%;display: block;height:360px;overflow: scroll}*/
    /*.main table tbody::-webkit-scrollbar{display:none}*/
    /*.main table tbody tr td button{padding:3px;margin: 0;border-radius: 5px}*/
    /*.main table tbody tr{height:29px;width: 100%;display: block;border-top: 2px solid #eee;}*/
    /*.main table tbody tr:hover{background-color:rgba(0,0,0,.3);}*/
    /*.main table thead tr{width: 100%;display: block}*/
    /*.main table tbody tr td{width:20%;height:24px;display: block;float: left;margin-bottom: 3px;overflow: hidden}*/
    /*.main table thead tr th{width:20%;display: block;float: left}*/
    /*.outbox{position: absolute;width: 100%;height:560px; display: none;background-color: rgba(0,0,0,.3);}*/
    /*.outbox .Form{width:600px;margin: 30px 300px;background-color: white;border: 1px solid #000;border-radius: 5px;text-align:center;}*/
    /*.outbox .Form .input{ width: 50%;margin-bottom: 10px;}*/
    .main table tbody tr td{width:20%;}
    .main table thead tr th{width:20%;}

</style>
<script>
    function deleteButtonClick(id){
        let msg = "您确定要删除该商品吗？";
        if (confirm(msg)===true){
            window.location ="/Gradle___com_example___stroeBackstage_1_0_SNAPSHOT_war/toDelCommodity?id="+id;
            return true;
        }else{
            return false;
        }
    }
    function updateButtonClick(id,category,name,img, model,introduction,price){
        let updateBox=document.getElementById("updateBox");
        updateBox.style.display = "block";
        let updateForm = document.getElementById("updateForm");
        updateForm.children.namedItem("id").value=id;
        updateForm.children.namedItem("category").value=category;
        updateForm.children.namedItem("name").value=name;
        updateForm.children.namedItem("img").value=img;
        updateForm.children.namedItem("model").value= model;
        updateForm.children.namedItem("introduction").value=introduction;
        updateForm.children.namedItem("price").value=price;
    }
    function addButtonClick(){
        let addBox=document.getElementById("addBox");
        addBox.style.display = "block";

    }
    function quit(box){
        box.style.display = "none";
    }
</script>
<body>
<jsp:include page="header.jsp"/>
<div class="box">
    <jsp:include page="nav.jsp"/>
    <div class="main">
        <div id="addBox" class="outbox">
            <form action="${pageContext.request.contextPath}/toInsertCommodity" id="addForm" class="Form" method="post">
                <h2 style="text-align: center">添加商品</h2>
                商品名称：<input type="text" name="name" class="input">
                <br>
                商品分类：<select name="category" id="" class="input">
                <c:forEach items="${sessionScope.categoryMap}" var="it">
                    <option value="${it.key}">${it.value}</option>
                </c:forEach>
            </select>
                <br>
                图片地址：<input type="text" name="img" class="input">
<%--                图片地址：<input type="file" name="imgFile" readonly class="input">--%>
                <br>
                商品型号：<input type="text" name="model" class="input">
                <br>
                商品单价：<input type="text" name="price" class="input">
                <br>
<%--                商品图片：<input type="file" name="img" class="input">--%>
                <h3>商品描述</h3>
                <textarea name="introduction" cols="30" rows="10" class="input"></textarea>
                <br>
                <input type="submit" value="确认">
                <input type="reset" value="退出" onclick="quit(addBox)">
            </form>
        </div>
        <div id="updateBox" class="outbox">
            <form action="${pageContext.request.contextPath}/toUpdateCommodity" id="updateForm" class="Form">
                <h2 style="text-align: center">修改商品</h2>
                <br>
                商品编号：<input type="text" name="id" readonly class="input">
                <br>
                商品分类：<select name="category" class="input">
                <c:forEach items="${sessionScope.categoryMap}" var="it">
                <option value="${it.key}">${it.value}</option>
                </c:forEach>
                </select>
                <br>
                商品名称：<input type="text" name="name" class="input">
                <br>
                更改图片：<input type="text" name="img" class="input"  >
                <br>
                商品型号：<input type="text" name="model" class="input">
                <br>
                商品单价：<input type="text" name="price" class="input">
                <br>
                <h3>商品描述</h3>
                <textarea name="introduction" cols="30" rows="10" class="input"></textarea>
                <br>
                <input type="submit" value="确认">
                <input type="reset" value="退出" onclick="quit(updateBox)">
            </form>
        </div>
        <div style="margin: 10px auto;height: 20%;width: 500px;text-align: center" class="main_head">
            <form action="${pageContext.request.contextPath}/toFindCommodity" style="margin: 10px auto;text-align: center">
                <label for="1"></label>
                <select name="by" id="1">
                    <option value="ID" >商品编号</option>
                    <option value="name" selected>商品名字</option>
                </select>
                <label>
                    <input type="search"  name="search">
                </label>
                <input type="submit" value="查询">
            </form>
            <button onclick="addButtonClick()">添加商品</button>
            <button><a href="category.jsp">分类管理</a></button>
        </div>
        <table>
            <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>所属分类</th>
                <th>商品单价</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${sessionScope.commodityList}" var="item" >
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.categoryName}</td>
                    <td>${item.price}</td>
                    <td>
                        <button style="background-color:#E6A23C;color: white;border: #E6A23C" onclick="updateButtonClick(`${item.id}`,`${item.category}`,`${item.name}`,`${item.img}`,
                                `${item.model}`,`${item.introduction}`,`${item.price}`)" >修改</button>
                        <button style="background-color: red;color: white;border: red" onclick="deleteButtonClick(${item.id})">删除</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>
